<template>
  <div>
    <div class="f1">
      <div class="f2">
        <span>您是否在找：</span>
      </div>
      <div class="f3">
        <a href="#" class="astyle">大码女装</a>
        <a href="#" class="astyle">欧美女装</a>
        <a href="#" class="astyle">夏季女装</a>
        <a href="#" class="astyle">时尚女装</a>
        <a href="#" class="astyle">连衣裙</a>
        <a href="#" class="astyle">秋冬女装新款</a>
        <a href="#" class="astyle">广州女装</a>
        <a href="#" class="astyle">一件代发女装</a>
        <a href="#" class="astyle">女装新款</a>
        <a href="#" class="astyle">杭州女装</a>
        <a href="#" class="astyle">韩版女装</a>
        <a href="#" class="astyle">秋季女装</a>
        <a href="#" class="astyle">品牌女装</a>
        <a href="#" class="astyle">裙子</a>
        <a href="#" class="astyle">气质女装</a>
        <a href="#" class="astyle">2022女装</a>
        <a href="#" class="astyle">2022新款女装</a>
        <a href="#" class="astyle">裙子夏季女装</a>
        <a href="#" class="astyle">一件代发工厂女装</a>
        <a href="#" class="astyle">女装潮流尖货</a>
      </div>
    </div>
    <div class="clearFix">
      <div
        class="f4"
        v-for="goods in paginationList"
        :key="goods.id"
        @click="goDetail"
      >
        <a href="#" class="frame">
          <div>
            <img :src="goods.pic_url" alt="" />
          </div>
          <div class="title">
            <a>
              <span class="title-content">
                {{ goods.title }}
              </span>
            </a>
          </div>
          <div class="text">
            <span class="text-content">热搜商品</span>
            <span class="text-content">48H发货</span>
            <span class="text-content1"
              >{{ goods.num_collectors }}+人已收藏</span
            >
          </div>
          <div class="price-line">
            <span class="price-symbol">￥</span>
            <span class="price-number">{{ goods.price }}</span>
            <span class="price-sale">销{{ goods.sales }}件</span>
            <span class="iconfont icon-wangwang price-icon"></span>
          </div>
        </a>
      </div>
    </div>
    <!-- 分页器 -->
    <div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[6, 7, 8, 9, 12]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ZProduct",
  data() {
    return {
      currentPage4: 1,
      pageSize: 6,
    };
  },
  mounted() {
    // this.getGoodsList();
    this.handlePagination();
  },
  methods: {
    // getGoodsList() {
    //   this.$store.dispatch("getGoodsList");
    // },
    goDetail() {
      // console.log("点击跳转页面");
      this.$router.push({
        name: "detail",
      });
    },
    handleSizeChange(val) {
      //limit
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handlePagination();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.handlePagination();
    },
    handlePagination() {
      this.$store.dispatch("getPagination", {
        page: this.currentPage4,
        limit: this.pageSize,
      });
    },
  },
  computed: {
    ...mapState({
      // goodsList: (state) => state.product.goodsList,
      paginationList: (state) => {
        return state.product.paginationList;
      },
    }),
  },
};
</script>
<style lang="less" scoped>
.f1 {
  margin: 20px auto 0 auto;
  border: 1px solid #e5e5e5;
  width: 1390px;
  height: 85.2px;
  padding: 0 0 0 15px;

  .f2 {
    float: left;
    font: 12px;
    color: #999999;
    line-height: 40px;
  }
  .f3 {
    font-size: 12px;
    color: #666;
    line-height: 40px;
    .astyle {
      padding: 0 16px;
      text-decoration: none;
      text-align: center;
    }
  }
}

.f4 {
  width: 1420px;
  // height: 3000px;
  box-sizing: border-box;
  margin: 20px -60px 0 60px;
  .frame {
    width: 222px;
    height: 318px;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    margin-bottom: 11px;
    margin-right: 11px;
    float: left;
    position: relative;
    text-decoration: none;
    .title {
      height: 20px;
      width: 200px;
      margin: 10px 10px 8px;
      overflow: hidden;

      .title-content {
        width: 200px;
        height: 20px;
        // 禁止换行
        white-space: nowrap;
        font-size: 12px;
        color: #333;
        word-break: break-all;
        text-overflow: ellipsis;
      }
    }
    .text {
      width: 200px;
      height: 16px;
      margin: 0 10px 9px;

      .text-content {
        background-color: rgb(0, 137, 253, 0.1);
        border: 1px solid rgba(0, 137, 253, 0.3);
        height: 16px;
        line-height: 14px;
        padding: 0 1px;
        margin-right: 4px;
        font-weight: 400;
        font-size: 12px;
      }
      .text-content1 {
        font-weight: 400;
        font-size: 12px;
        color: #999;
      }
    }
    .price-line {
      width: 200px;
      height: 24px;
      margin: 0 10px 9px;
      .price-symbol {
        font-size: 14px;
        line-height: 12p;
        margin-right: 2px;
        color: #ff6000;
        font-weight: 700;
      }
      .price-number {
        font-size: 24px;
        line-height: 19px;
        color: #ff6000;
        font-weight: 700;
      }
      .price-sale {
        margin-left: 20px;
        font-weight: 400;
        font-size: 12px;
        color: #999;
      }
      .price-icon {
        margin-left: 20px;
      }
    }
  }
  img {
    width: 220px;
    height: 220px;
  }
}

.block {
  text-align: center;
}
</style>
